<template>
  <div class="container">
    <el-form :model="addinfo" :rules="rules" ref="addForm">
      <div class="search-top">
        <el-form-item class="search-item"  label="库区编号"><el-input :disabled="addinfo.code!==''" v-model="addinfo.code"/></el-form-item>
        <el-form-item class="search-item" prop="warehouseId" label="所属仓库">
        <el-select v-model="addinfo.warehouseId" style="width:100%">
          <el-option v-for="item,index in warehouse" :key="index"  :value="item.id" :label="item.name"/>
        </el-select>
        </el-form-item>
        <el-form-item class="search-item" prop="name" label="库区名称"><el-input v-model="addinfo.name"/></el-form-item>
        <el-form-item class="search-item" prop="temperatureType" label="温度类型">
        <el-select v-model="addinfo.temperatureType" style="width:100%">
          <el-option v-for="item,index in temperatureType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
      </div>
      <div class="search-top">
        <el-form-item class="search-item" prop="bearingType" label="承重类型">
        <el-select v-model="addinfo.bearingType" style="width:100%">
          <el-option v-for="item,index in bearingType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
        <el-form-item class="search-item" prop="useType" label="用途属性">
        <el-select v-model="addinfo.useType" style="width:100%">
          <el-option v-for="item,index in useType" :key="index"  :value="item.value" :label="item.label"/>
        </el-select>
        </el-form-item>
        <el-form-item class="search-item" prop="personName" label="负责人"><el-input v-model="addinfo.personName"/></el-form-item>
        <el-form-item class="search-item" prop="phone" label="联系电话"><el-input v-model="addinfo.phone"/></el-form-item>
      </div>
      <!-- <div class="search-second">
        <el-form-item class="search-item"  prop="province" label="省/市/区">
        <el-cascader
        ref="areainfo111"
        style="width:217%"
        v-model="area"
        :options="areainfo.exports"
        :props="{ expandTrigger: 'hover',value:'code',label:'name', children:'areaList'}"
        @change="handleChange"></el-cascader></el-form-item>
      </div> -->
      <!-- <div class="search-third">
        <el-form-item class="search-item" label="详细地址"><el-input  v-model="addinfo.address"  style="width:217%"/></el-form-item> -->
        <div class="search-third" >
        <el-form-item class="search-item radio-item" prop="status" label="仓库状态">
              <el-radio v-model="addinfo.status"  :label="0">停用</el-radio>
              <el-radio v-model="addinfo.status"  :label="1">启用</el-radio>
        </el-form-item>
        </div>
      <!-- </div> -->
      <!-- <div class="search-down search-top">
        <el-form-item class="search-item" label="仓库面积">
          <el-input v-model="addinfo.surface">
             <i slot="suffix" style="font-size: 8px;padding: 13px 12px 11px 12px ;margin-right: -5px;    margin-buttom: -5px;    background: #a9a1a1;    border-radius: 5px;"><span>㎡</span></i>
          </el-input>
        </el-form-item>
        <el-form-item class="search-item" prop="personName" label="负责人"><el-input v-model="addinfo.personName"/></el-form-item>
        <el-form-item class="search-item" prop="phone" label="联系电话"><el-input v-model="addinfo.phone"/></el-form-item>
      </div> -->
      <div class="Btn">
        <el-button class="btn1" @click="backFn">返回</el-button>
        <el-button class="btn2" @click="submit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getwarehouselist, add, getCode, detail, edit } from '@/api/kqgl'
// 获取启用的仓库列表,

export default {
  name: 'kqgl-add',
  async created () {
    const { data: warehouselist } = await getwarehouselist()// 获取启用的仓库列表
    // console.log(warehouselist)
    this.warehouse = warehouselist
    // console.log(this.$route.query.id)// 路由传参有值得话进入判断, 就是编辑页
    if (this.$route.query.id) {
      const { data: detailinfo } = await detail(this.$route.query.id)// 路由传过来库区id,按照id查询库区详情 回显
      console.log(detailinfo)
      this.addinfo = detailinfo
    } else {
      const { data: Code } = await getCode()// 获取新库区code
      this.addinfo.code = Code
    }
  },
  mounted () {
    // console.log(this.$refs.areainfo111)
  },
  data () {
    return {
      // title: '新增库区', // 判断是否新增或修改
      addinfo: { // add的data
        code: '',
        bearingType: '',
        name: '',
        personName: '',
        phone: '',
        status: '',
        temperatureType: '',
        useType: '',
        warehouseId: ''
      },
      warehouse: {}, // 仓库列表
      temperatureType: [{ // 温度类型
        value: 'CW',
        label: '常温'
      }, {
        value: 'LC',
        label: '冷藏'
      }, {
        value: 'HW',
        label: '恒温'
      }],
      bearingType: [{ // 承重类型
        value: 'ZX',
        label: '重型'
      }, {
        value: 'QX',
        label: '轻型'
      }, {
        value: 'BX',
        label: '中型'
      }],
      useType: [{ // 使用类型
        value: 'RKHCQ',
        label: '入库缓存区'
      }, {
        value: 'CKHCQ',
        label: '出库缓存区'
      }, {
        value: 'CCQ',
        label: '存储区'
      }, {
        value: 'FJQ',
        label: '分拣区'
      }, {
        value: 'ZJQ',
        label: '质检区'
      }],
      status: [], // 仓库状态
      rules: { // 表单校验规则
        warehouseId: [{ required: true, message: '必填', trigger: 'change' }],
        name: [{ required: true, message: '必填' }],
        temperatureType: [{ required: true, message: '必填', trigger: 'change' }],
        bearingType: [{ required: true, message: '必填', trigger: 'change' }],
        useType: [{ required: true, message: '必填', trigger: 'change' }],
        status: [{ required: true, message: '必填' }],
        personName: [{ required: true, message: '必填' }],
        phone: [{ min: 11, max: 11, message: '长度为11个字符' }]
        // requiredChange: [{ required: true, message: '必填', trigger: 'change' }],
        // personName: [{ required: true, message: '必填' }]
      }
    }
  },
  methods: {
    async handleChange (a) {
      this.$nextTick(() => {
        setTimeout(() => { this.addinfo.location = this.$refs.areainfo111.inputValue })
      })
      this.addinfo.province = this.area[0]
      this.addinfo.city = this.area[1]
      this.addinfo.area = this.area[2]
    },
    async submit () {
      try {
        if (this.$route.query.id) {
          await this.$refs.addForm.validate()
          await edit(this.addinfo)
          this.$message.success('修改成功')
        } else {
          await this.$refs.addForm.validate()
          await add(this.addinfo)
          this.$message.success('新增成功')
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.addinfo = { area: '', address: '', city: '', code: '', location: '', name: '', personName: '', phone: '', province: '', status: '', surface: '', type: '' }
        this.$refs.addForm.resetFields()
        this.backFn()
      }
    },
    backFn () {
      this.$router.back()
    }

  }

}
</script>

<style lang="less" scoped>
.container{
 min-width: 100%;
 height: 509px;
//  margin: 0 30px;
 padding: 30px;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 3px 3px  10px gray;
 /deep/.search-top{
  display: flex;
   justify-content: space-between;
 }
  /deep/.search-item{
    .el-form-item__label{
    text-align: left;
    }
    display: flex;
    flex-direction: column;
    width: 24% !important;
    height: 68px;
    margin-top: 5px;
    // background-color: #fff;
    .el-input__inner{
      background-color: #f3ebebd4!important;
      border:unset !important;
      border-radius: 5px!important;
    }
    .el-input__inner:hover{
      border:1px solid rgb(122, 121, 121) !important;
    }
    .el-input__inner:focus{
      border:1px solid orange!important;
    }
  }
  /deep/.search-third{
    display: flex;
    justify-content: space-between;
    .search-item.radio-item{
      .el-form-item__content{
        display: flex;
        // align-items: center;
      }
    }
    .el-radio.is-focus{
      color: orange;
    }
      .el-radio__inner:hover{
        border: 1px solid orange !important;
      }
      .el-radio__inner{
        border: 1px solid rgb(214, 213, 212) !important;
      }
        .el-radio.is-checked .el-radio__input.is-checked .el-radio__inner {
           border-color: orange;
           background: orange;
        }
         .el-radio.is-checked .el-radio__label {
           color:orange ;
        }

  }
  .Btn{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    .el-button{
      width: 170px;
      height: 40px;
      border-radius: 30px;
      border: none;
    }
    .btn1{
      background-color: #f8f5f5;
    }
    .btn1:hover{
      background-color: #ffb200;
      color: black;
    }
    .btn2{
      background-color: #ffb200;
    }
    .btn2:hover{
      background-color: #cb7504;
      color: black;

    }
  }
  .el-popper.el-cascader__dropdown.abc .el-cascader-node:hover{
    color: #e31d26 !important;
    font-weight: 700 !important;
}
}

</style>
